import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:osg/controllers/http.dart';

RxInt num = 1.obs;
RxString uuid = ''.obs;

class ReplacementDateil extends StatefulWidget {
  ReplacementDateil({super.key});

  @override
  State<ReplacementDateil> createState() => _SettingPageState();
}

class _SettingPageState extends State<ReplacementDateil> {
  RxMap info = {}.obs;

  getInfo() {
    Get.find<HTTPS>().getData('/exchange/$uuid', {}).then((res) {
      if (res != null) {
        info.value = res;
      }
    });
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      uuid.value = Get.parameters['uuid']!;

      getInfo();
    });
  }

  catrf() {
    //UI
    Get.bottomSheet(
        isScrollControlled: true,
        shape: RoundedRectangleBorder(
          // 圆角设置:ml-citation{ref="7" data="citationList"}
          borderRadius: BorderRadius.vertical(top: Radius.circular(10)),
        ),
        backgroundColor: Colors.white,
        Container(
          height: 300,
          padding: EdgeInsets.symmetric(horizontal: 15),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                height: 15,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '置换',
                    style: TextStyle(fontSize: 20),
                  ),
                  GestureDetector(
                    onTap: () {
                      Get.back();
                    },
                    child: Image.asset(
                      'static/close.png',
                      width: 18,
                      fit: BoxFit.fitWidth,
                    ),
                  )
                ],
              ),
              Text(
                '拥有以下材料即可进行置换',
                style: TextStyle(fontSize: 14, color: Color(0XFF999999)),
              ),
              if (info['batch_combine'] == 1)
                SizedBox(
                  height: 20,
                ),
              if (info['batch_combine'] == 1)
                Row(
                  children: [
                    Text(
                      '置换数量',
                      style: TextStyle(fontSize: 14, color: Color(0XFF999999)),
                    ),
                    Expanded(child: SizedBox()),
                    GestureDetector(
                      onTap: () {
                        if (num.value > 1) {
                          num.value--;
                        }
                      },
                      child: Image.asset(
                        'static/web/jian.png',
                        width: 18,
                        fit: BoxFit.fitWidth,
                      ),
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    Obx(() => Text(
                          '$num',
                          style: TextStyle(
                            fontSize: 16,
                          ),
                        )),
                    SizedBox(
                      width: 20,
                    ),
                    GestureDetector(
                      onTap: () {
                        num.value++;
                      },
                      child: Image.asset(
                        'static/web/jia.png',
                        width: 18,
                        fit: BoxFit.fitWidth,
                      ),
                    ),
                    //
                  ],
                ),
              SizedBox(
                height: 20,
              ),
              Container(
                margin: EdgeInsets.only(bottom: 10),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Color(0XFFF8F9FD),
                ),
                child: Row(
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(10),
                          bottomLeft: Radius.circular(10)), // 设置圆角大小
                      child: Image.network(
                        '${info['materials']['thumb']}',
                        width: 70,
                        height: 70,
                        fit: BoxFit.fill,
                      ),
                    ),
                    SizedBox(
                      width: 10,
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '${info['materials']['title']}',
                          style: TextStyle(
                              fontSize: 14,
                              color: Color(0XFF0F172B),
                              fontWeight: FontWeight.bold),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Row(
                          children: [
                            SizedBox(
                              width: 76,
                              child: LinearProgressIndicator(
                                borderRadius: BorderRadius.circular(5),
                                value: info['materials']['count'] >= 1
                                    ? 1
                                    : info['materials']['count'] /
                                        1, // 进度值，范围从0.0到1.0
                                backgroundColor: Colors.grey[300], // 背景颜色
                                valueColor: AlwaysStoppedAnimation<Color>(
                                    Color(0XFF0F172B)), // 进度条颜色
                              ),
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            Text('${info['materials']['count']}/1')
                          ],
                        )
                      ],
                    ),
                    Expanded(child: SizedBox()),
                    info['materials']['count'] == 0
                        ? Text(
                            '未拥有',
                            style: TextStyle(
                                fontSize: 12, color: Color(0XFF999999)),
                          )
                        : info['materials']['count'] >= 1
                            ? SizedBox()
                            : Text(
                                '去购买',
                                style: TextStyle(
                                    fontSize: 12, color: Color(0XFF0F172B)),
                              ),
                    SizedBox(
                      width: 16,
                    ),
                  ],
                ),
              ),
              Expanded(child: SizedBox()),
              GestureDetector(
                onTap: () => {
                  Get.find<HTTPS>().postData('/exchange/$uuid/confirm',
                      {"num": num.value}).then((res) {
                    if (res != null) {
                      Get.dialog(
                        barrierDismissible: false,
                        AlertDialog(
                          backgroundColor: Colors.transparent,
                          content: Stack(
                            children: [
                              Image.asset(
                                'static/web/hesuu.png',
                                width: 250,
                                fit: BoxFit.fitWidth,
                              ),
                              Positioned(
                                  top: 130,
                                  left: 0,
                                  right: 0,
                                  child: Align(
                                      child: Column(
                                    children: [
                                      Text(
                                        '置换成功',
                                        style: TextStyle(
                                            fontSize: 24,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      SizedBox(
                                        height: 15,
                                      ),
                                      Text(
                                        '本次置换材料已销毁',
                                        style: TextStyle(
                                            fontSize: 14,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      GestureDetector(
                                        onTap: () {
                                          Get.back();
                                          Get.back();
                                          getInfo();
                                        },
                                        child: Container(
                                          height: 50,
                                          margin: EdgeInsets.symmetric(
                                              vertical: 30, horizontal: 20),
                                          alignment: Alignment.center,
                                          decoration: BoxDecoration(
                                              color: Color(0XFF0F172B),
                                              borderRadius:
                                                  BorderRadius.circular(50)),
                                          child: Text(
                                            '确定',
                                            style: TextStyle(
                                                fontSize: 18,
                                                color: Color(0XFFFFFFFF)),
                                          ),
                                        ),
                                      )
                                    ],
                                  )))
                            ],
                          ),
                        ),
                      );
                    }
                  })
                },
                child: Container(
                  height: 50,
                  margin: EdgeInsets.symmetric(vertical: 10),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: Color(0XFF0F172B),
                      borderRadius: BorderRadius.circular(50)),
                  child: Text(
                    '立即置换',
                    style: TextStyle(fontSize: 18, color: Color(0XFFFFFFFF)),
                  ),
                ),
              )
            ],
          ),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xffffffff),
        ),
        body: Column(
          children: [
            Expanded(
                child: ListView(
              children: [
                Obx(
                  () => Image.network('${info['thumb']}',
                      errorBuilder: (context, error, stackTrace) {
                    return SizedBox(
                      width: 60,
                    );
                  }),
                ),
                SizedBox(
                  height: 15,
                ),
                Padding(
                    padding: EdgeInsets.symmetric(horizontal: 15),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Obx(()=>
                          Text(
                            '总置换次数${info['stock']}份',
                            style:
                                TextStyle(fontSize: 14, color: Color(0XFF1F0584)),
                          )
                        )
                       ,
                        Obx(() => Text(
                              '${info['title']}',
                              style: TextStyle(
                                  fontSize: 22, color: Color(0XFF0F172B)),
                            )),
                        SizedBox(
                          height: 20,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  '可置换次数',
                                  style: TextStyle(
                                      fontSize: 11, color: Color(0XFF999999)),
                                ),
                                Obx(() => Text(
                                      '${info['has_materials']}',
                                      style: TextStyle(
                                          fontSize: 12,
                                          color: Color(0XFF0F172B),
                                          fontWeight: FontWeight.bold),
                                    )),
                              ],
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  '开始时间时间',
                                  style: TextStyle(
                                      fontSize: 12, color: Color(0XFF999999)),
                                ),
                                Obx(() => Text(
                                      '${info['start_date']}',
                                      style: TextStyle(
                                          fontSize: 14,
                                          color: Color(0XFF0F172B),
                                          fontWeight: FontWeight.bold),
                                    )),
                              ],
                            ),
                            // Column(
                            //   crossAxisAlignment: CrossAxisAlignment.start,
                            //   children: [
                            //     Text(
                            //       '结束时间',
                            //       style: TextStyle(
                            //           fontSize: 12, color: Color(0XFF999999)),
                            //     ),
                            //     Text(
                            //       '2023.1.1 16:22',
                            //       style: TextStyle(
                            //           fontSize: 14,
                            //           color: Color(0XFF0F172B),
                            //           fontWeight: FontWeight.bold),
                            //     ),
                            //   ],
                            // ),
                          ],
                        ),
                        SizedBox(
                          height: 30,
                        ),
                        Text(
                          '置换材料',
                          style: TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 10),
                          padding: EdgeInsets.symmetric(
                              horizontal: 15, vertical: 10),
                          decoration: BoxDecoration(
                              color: Color(0XFFF8F9FD),
                              borderRadius: BorderRadius.circular(10)),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Obx(() => info.isNotEmpty
                                  ? Text('藏品《${info['materials']['title']}》*1')
                                  : SizedBox()),
                              Obx(() => info.isNotEmpty
                                  ? Text(
                                      '拥有${info['materials']['count']}',
                                      style: TextStyle(
                                          fontSize: 12,
                                          color: Color(0XFF0F172B)),
                                    )
                                  : SizedBox()),
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 30,
                        ),
                        Text(
                          '置换可得',
                          style: TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold),
                        ),

                        Obx(() => Column(
                              children: [
                                if (info.isNotEmpty)
                                  for (var item in info['make_skus'])
                                    Container(
                                      margin: EdgeInsets.only(top: 10),
                                      padding: EdgeInsets.symmetric(
                                          horizontal: 15, vertical: 10),
                                      decoration: BoxDecoration(
                                          color: Color(0XFFF8F9FD),
                                          borderRadius:
                                              BorderRadius.circular(10)),
                                      child: Row(
                                        children: [
                                          ClipRRect(
                                            borderRadius: BorderRadius.circular(
                                                5.0), // 设置圆角大小
                                            child: Image.network(
                                              '${item['thumb']}',
                                              width: 28,
                                              height: 28,
                                              fit: BoxFit.fill,
                                            ),
                                          ),
                                          SizedBox(
                                            width: 10,
                                          ),
                                          Text(
                                              '${item['title']}*${item['num']}'),
                                        ],
                                      ),
                                    ),
                              ],
                            )),
                        SizedBox(
                          height: 30,
                        ),
                        Text(
                          '藏品简介',
                          style: TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Obx(() => Column(
                              children: [
                                if (info.isNotEmpty)
                                  for (var item in info['detail_images'])
                                    Image.network('$item'),
                              ],
                            )),
                        SizedBox(
                          height: 10,
                        ),
                        Text(
                          '购买须知',
                          style: TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                        SizedBox(
                          height: 5,
                        ),
                        Text(
                          '数字藏品交易仅限于18周岁(不含)以上、60周岁(含)以下，并已完成实名认证的中国大陆用户购买。由于不同属性的数字艺术有不同的二次交易规则，请您仔细阅读并同意相关规则后再进行相应操作，以避免不必要的损失。 请注意，一旦数字藏品完成出售，不支持退货在购买之前，请仔细考虑您的购买决策。根据我国相关的法律要求，特定条件下的数字藏品的二次交易不支持任何形式的变相炒作。我们坚决反对数字藏品炒作、场外交易、欺诈，以及其他非法侵权行为。请您甄别上述涉嫌网络欺诈的行为并了解相关风险。',
                          style:
                              TextStyle(fontSize: 12, color: Color(0XFF999999)),
                        ),
                        SizedBox(
                          height: 15,
                        ),
                      ],
                    )),
              ],
            )),

// Expanded(child: SizedBox()),
GestureDetector(
                      onTap: () {catrf();},
                      child:
            Container(
                margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                height: 50,
                decoration: BoxDecoration(
                    color: Color(0XFF0F172B),
                    borderRadius: BorderRadius.circular(60)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                     Text(
                        '立即置换',
                        style:
                            TextStyle(fontSize: 18, color: Color(0XFFFFFFFF)),
                      ),
                  ],
                    ),
                ))
          ],
        ));
  }
}
